<template lang="html">
  <div id="charts">
    <div id="rcd" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
import co from 'co'
import echarts from 'echarts'
import {HttpResetClass } from 'vue-client'

let getData = function * (self) {
  // let s1 = 't.'
  // let s2 = 'u.'
  // self.replacestr(self.condition,s1)
  // self.replacestr(self.con,s2)
  let load = new HttpResetClass()
  load.load('POST','rs/sql/Record',
  {data: {condition: self.condition}},
  {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    let arrdata = []
    for (var i = 0; i < res.data.length; i++) {
        arrdata[i] = res.data[i].name
    }
    self.set(arrdata, res.data)
  })
}
export default {
  props: ['condition', 'tablename'],
 data () {
   return {
     xc: '',
     con: ''
   }
 },
 methods: {
   set (arrdata,data) {
     this.xc = echarts.init(document.getElementById('rcd'))
     this.xc.setOption({
       title : {
         text: '操作类型pie图',
         x: 'centre'
       },
       tooltip: {
       trigger: 'item',
       formatter: "{a} <br/>{b}: {c} ({d}%)"
   },
       legend: {
         x: 'centre',
         y: 'bottom',
         data: arrdata
       },
       calculable : true,
      series: [
       {
           name:'数量数据',
           type:'pie',
           radius: ['50%', '70%'],
           avoidLabelOverlap: false,
           label: {
             normal: {
                 formatter: '{a}\n  {b}{c} {d}% ',
                 backgroundColor: '#eee',
                 borderColor: '#aaa',
                 borderWidth: 1,
                 borderRadius: 4,
                 rich: {
                     a: {
                         color: '#999',
                         lineHeight: 22,
                         align: 'center'
                     },
                     hr: {
                         borderColor: '#aaa',
                         width: '100%',
                         borderWidth: 0.5,
                         height: 0
                     },
                     b: {
                         fontSize: 16,
                         lineHeight: 33
                     },
                     per: {
                         color: '#eee',
                         backgroundColor: '#334455',
                         padding: [2, 4],
                         borderRadius: 2
                     }
                 }
             },
               emphasis: {
                   show: true
               }
           },
           data:data
       }
   ]
     })
   },
   searchdata () {
     let getGen =getData(this)
     co(getGen)
   },
   replacestr (str,rstr) {
     if (str.indexOf(rstr) >= 0) {
       this.replacestr(str.replace(rstr, ''), rstr)
     } else {
       this.con = str
     }
   }
 },
 watch: {
   'condition' (val) {
      this.searchdata()
   },
   'tablename' (val) {
     this.searchdata()
   }
 },
 ready () {
   this.searchdata()
 }

}
</script>
<style lang="css">
#charts div{
  height: auto;
}
</style>
